<!DOCTYPE html>
<!-- saved from url=(0177)file:///Users/alala-macbook/Library/Containers/com.tencent.Foxmail/Data/Library/Foxmail/Profiles/alalals@126.com/Mail/19/9/6171995086689934953.attachment/%E8%8A%B1%E8%8A%B1.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>花花</title>	
</head><body><canvas id="content" style="position:absolute;left:0px;top:0px;" width="1397" height="766">
		你的浏览器不支持
</canvas>
<script type="text/javascript">
	//通过id获取元素
	function _id(id) {
		return document.getElementById(id);
	};
	
	var painter = {
		cxt: null,
		w: window.innerWidth,
		h: window.innerHeight,
		//彩虹参数
		rainbow: {
			width : 20,
			colors : ["rgb(255,0,0)","rgb(255,125,0)","rgb(255,255,0)","rgb(0,255,0)",
				"rgb(0,0,255)","rgb(0,255,255)","rgb(255,0,255)"],
			startIndex : 0
		},
		sun : {
			radius : 100,
			scale : 9,
		},
		//刷新参数
		refresh : {
			interval : 1000,
			isRefresh : false,
		},
		init: function() {	
			var content = _id("content");
			
			content.width = this.w;
			content.height = this.h;
			this.cxt = content.getContext("2d");
		},
		//绘制背景
		drawBg: function() {	
			var gradientColor = this.cxt.createLinearGradient(0, 0, this.w, this.h);
            gradientColor.addColorStop(0,"rgba(49,126,206,0.5)");
			gradientColor.addColorStop(0.7,"rgba(49,126,206, 0.8)");
			gradientColor.addColorStop(1,"rgba(17,78,205, 0.8)");
			this.cxt.fillStyle = gradientColor;
			this.cxt.fillRect(0,0,this.w,this.h);			
		},
		//绘制彩虹
		drawRainbow: function() {	
			var len = 7;
			for(var i = 0; i < len; i++) {
				var colorNum = (i + this.rainbow.startIndex) % len;				
				var color = this.rainbow.colors[colorNum];
				var radius = this.h * 1.5 - i * this.rainbow.width;
				this.drawOneRainbow(radius,color);
			}
			this.rainbow.startIndex++;
		},
		//绘制太阳
		drawSun : function() {		
			var radius = ((this.sun.scale++) % 10 + 10)/19.0 * this.sun.radius;
			var centerX = this.sun.radius;
			var centerY = this.sun.radius;			
			
			//:创建渐变颜色
			var gradientColor = this.cxt.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius);  
            gradientColor.addColorStop(0,"rgba(255,255,255,1)");
			gradientColor.addColorStop(1,"rgba(255,255,255,0)");
			
			//:绘制弧度
			this.cxt.fillStyle = gradientColor;
			this.cxt.beginPath();
			this.cxt.arc(centerX, centerY, this.sun.radius, 0, 
				 2 * Math.PI, true);
			this.cxt.fill();
		},
		//绘制一条彩虹
		drawOneRainbow: function(radius, color) {
			var centerX = this.w * 0.6;
			var centerY = this.h * 1.53;
			
			var startingAngle = 1.7 * Math.PI;
			var endingAngle = 1 * Math.PI;
			
			//:创建渐变颜色
			var gradientColor = this.cxt.createLinearGradient(0, this.h, this.w * 1.5, 0);  
            gradientColor.addColorStop(0,color);
			gradientColor.addColorStop(1,"rgba(255,255,255,0)");
			
			//:绘制弧度
			this.cxt.strokeStyle = gradientColor;
			this.cxt.lineWidth = this.rainbow.width;
			this.cxt.beginPath();
			this.cxt.arc(centerX, centerY, radius, startingAngle, 
				endingAngle, true);
			this.cxt.stroke();
		},
		drawCloud : function() {
			this.drawHeart(this.w - 200 ,this.h - 200);			
		},
		drawHeart : function(x,y) {
			var ctx = this.cxt;
			ctx.fillStyle = "rgb(251,128,121)";
			ctx.beginPath();
			ctx.moveTo(x + 75,y + 40);
			ctx.bezierCurveTo(x + 75, y + 37,  x + 70, y + 25,  x + 50, y + 25);
			ctx.bezierCurveTo(x + 20, y + 25,  x + 20, y + 62.5,x + 20, y + 62.5);
			ctx.bezierCurveTo(x + 20, y + 80,  x + 40, y + 102, x + 75, y + 120);
			ctx.bezierCurveTo(x + 110,y + 102, x + 130,y + 80,  x + 130,y + 62.5);
			ctx.bezierCurveTo(x + 130,y + 62.5,x + 130,y + 25,  x + 100,y + 25);
			ctx.bezierCurveTo(x + 85, y + 25,  x + 75, y + 37,  x + 75, y + 40);
			ctx.fill();
		},
		draw : function() {
			this.cxt.clearRect(0,0,this.w,this.h);
			this.drawBg();
			this.drawSun();
			this.drawRainbow();
			this.drawCloud();
		}
	};	
	
	//初始化绘制参数
	painter.init();
	
	//刷新方法
	function refresh() {
		if(painter.refresh.isRefresh) {
			painter.draw();
		}
		setTimeout(refresh,100);
	}
	//首次画
	painter.draw();
	window.onclick = function() {
		painter.refresh.isRefresh = !painter.refresh.isRefresh;
	}
	//开始刷新
	refresh();
	
</script></body></html>